<!--  -->
<template>
  <div>
    <van-search v-model="value" placeholder="搜索课程" shape="round"  readonly @click.stop="searchTo"/>   
    <div class="classify-content flex">
      <div class="classify-left" ref="classifyArr"  style="overflow: hidden;">
        <div class="left-box" v-if="classify.length > 1">
          <block v-for="(item,index) in classify" :key="index" >
            <div  :class="classifyIndex === index ? 'on':''" @click.capture="classifyOnText(index,item.id,$event)">{{item.name}}</div>
          </block>
        </div>
      </div>
      <div ref="handpickList" class="classify-main" style="overflow: hidden;" >
        <div  class="classify-box flex-j-sb"  v-if="classifyList.length > 0">
          <block v-for="(item,index) in classifyList" :key="index" class="goods-item">
            <goods-item :dataItem="item" :index="index"></goods-item>
          </block>
          <span id="loadMore" style="display: inline-block; width: 100%; height: 5rem;"></span>
        </div>
        <van-empty description="暂无数据" v-else />
      </div>
    </div>
    <!-- <div class="h-50"></div> -->
    <footer-tabbar v-show="footerFlag"></footer-tabbar>
  </div>
</template>

<script>
import classifyCourse_controller from "./classifyCourse_controller.js";
export default classifyCourse_controller;
</script>
<style lang="scss" scoped>
  .h-50 {
    height: 3.125rem;
    clear: both;
  }
  .classify-content {
    margin: 0.8125rem 0 0 0;
    position: relative;

    .classify-left {
      background-color: #fff;
      min-width: 6.25rem;
      height: 90vh;

      .left-box {
        padding: 0 0 3.125rem 0;

        div {
          padding: 1.1875rem 0;
          text-align: center;
          font-size: 0.875rem;
          color: #3b3b4a;
        }
        .on {
          background: #fafafa;
          position: relative;

          &::after {
            position: absolute; // 相对于父元素进行绝对定位
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            content: "";
            width: 0.1875rem;
            height: 1.25rem;
            background: var(--themeBaseColor);
            border-radius: 0.9375rem 0.9375rem 0.9375rem 0.9375rem;
          }
        }
      }
    }
    .classify-main {
      box-sizing: border-box;
      width: calc(100% - 7.875rem);
      // min-width: 100%;
      height: 90vh;
      margin: 0 0.8125rem;
      position: relative;

      .classify-box {
        padding: 0 0 3.125rem 0;
        flex-wrap: wrap;
        cursor: pointer;
        // width: calc(50% - 0.25rem);
        // min-width: 100%;
        .goods-item {
          border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
          background-color: #fff;
          width: calc(50% - 0.25rem);
          margin: 0 0 0.5rem 0;
          position: relative;
        }
      }
    }
  }
</style>